<!DOCTYPE html>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>物资领用申请</title>

		<link rel="stylesheet" href="../css/index.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/mycommon.js"></script>

		<style>
			.page {
				position: fixed;
				bottom: 0;
				height: 35%;
				width: 90%;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="物资名称">
						<el-input v-model="formInline.materialname" placeholder="物资名称"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="selectTj">查询</el-button>

					</el-form-item>
				</el-form>
			</fieldset>
			<!-- 查询开始 -->
			<el-table size="big" :data="tableData" border style="width: 100%" :cell-style="{'text-align':'center'}"
				:header-cell-style="{'text-align':'center'}">
				<!-- <el-table-column prop="materialid" label="物资id" width="60">
				</el-table-column> -->
				<el-table-column prop="codematerial" label="物资编码" width="130">
				</el-table-column>
				<el-table-column prop="materialname" label="物资名称" width="140">
				</el-table-column>
				<el-table-column prop="warehouse" label="所属仓库">
				</el-table-column>
				<el-table-column prop="area" label="所属仓库区">
				</el-table-column>
				<el-table-column prop="shelves" label="所属区货架">
				</el-table-column>
				<el-table-column prop="quantity" label="在库物资数量">
				</el-table-column>
				<el-table-column prop="remark" label="备注">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">

						<el-button size="mini" type="danger"
							@click="application(scope.$index, scope.row)">申请</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="page">
				<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="tocal" :page-size="pagesize">
				</el-pagination>
			</div>
			<!-- 分页 -->

			<!-- 查询结束 -->


			<!-- 申请物资开始 -->
			<el-dialog title="申请物资" :visible.sync="derFormble" width="50%">
				<el-form ref="form1" :model="derForm" label-width="100px" size="mini">
					<el-form-item prop="materialid" label="物资id">
						<el-input v-model="derForm.materialid"></el-input>
					</el-form-item>

					<el-form-item prop="warehouse" label="所属仓库">
						<el-input v-model="derForm.warehouse"></el-input>
					</el-form-item>

					<el-form-item prop="area" label="所属仓库区">
						<el-input v-model="derForm.area"></el-input>
					</el-form-item>

					<el-form-item prop="shelves" label="所属区货架">
						<el-input v-model="derForm.shelves"></el-input>
					</el-form-item>

					<el-form-item prop="content" label="申请数量">
						<el-input v-model="derForm.content"></el-input>
					</el-form-item>

					<el-form-item prop="applicationtime" label="申请时间">
						<el-input v-model="derForm.applicationtime"></el-input>
					</el-form-item>

					<el-form-item prop="status" label="申请状态">
						<el-input v-model="derForm.status"></el-input>
					</el-form-item>

					<el-form-item prop="throughtime" label="申请通过时间">
						<el-input v-model="derForm.throughtime"></el-input>
					</el-form-item>

					<el-form-item prop="remarks" label="备注">
						<el-input v-model="derForm.remarks"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="derFormble = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="derSubmit">确 定</el-button>
				</span>

			</el-dialog>
			<!-- 申请物资结束 -->


		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					formInline: {
						materialname: ''
					},
					//物资信息查询
					selectForm: {
						warehouse: '', //仓库名称
						area: '', //仓库区的名称
						shelves: '', //区货架的名称
						codematerial: '', //物资编码
						materialname: '' //物资名称

					},

					// 物资申请
					derFormble: false,
					cun: "", //在库物资数量
					derForm: {
						materialid: '', //物资id
						warehouse: '', //所属仓库id
						wid: '',
						area: '', //所属仓库区id
						aid: '',
						shelves: '', //所属区货架id
						sid: '',
						content: '', //申请数量
						remarks: '', //申请备注				
						applicationtime: '', //申请提交时间
						status: '2', //申请状态,默认为2
						throughtime: '', //申请通过时间,默认为空

					},

					dialogFormVisible: false,

					formLabelWidth: '120px',
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 5 //每页条数
				},
				methods: {
					handleCurrentChange(val) { //分页
						this.page = val //设置当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					//申请
					application(index, row) {
						this.derFormble = true
						this.cun = row.quantity
						var that = this
						//获取需要申请的物资信息
						axios.post(HTTP + "/material/upSelect", {
							"id": row.id
						}).then(function(res) {
							//alert(JSON.stringify(res));
							that.derForm = res.data.data.one
							that.derForm.status = 2
							that.derForm.applicationtime = new Date
						}).catch(err => {
							console.log(err)
						});


					},
					//申请数据提交
					derSubmit() {
						/* alert(JSON.stringify(this.derForm.content))
						alert(JSON.stringify(this.cun)) */
						if (parseInt(this.derForm.content) > parseInt(this.cun)) {
							alert("在库物资数量不足!")
						} else {
							this.derFormble = false
							//alert(JSON.stringify(this.derForm));
							var that = this
							//添加到申请表中
							axios.post(HTTP + "der/addDer", this.derForm).then(function(res) {

								if (res.data.code == 200) {
									//申请
									that.$message('申请已提交')
								}

							}).catch(err => {
								console.log(err)
							});
						}
					},
					//查询
					initdata() {
						var that = this
						//获取在库物资数据
						axios.get(HTTP + "material/select/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});

					},

					selectTj() {
						//根据条件查询
						var that = this
						//alert(JSON.stringify(this.formInline))
						axios.post(HTTP + "material/searchSelect", this.formInline).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.list
							that.tocal = res.data.data.total

						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() { //vue生命周期的方法
					//发送ajax请求到后端接口，获取json数据
					this.initdata()

				}
			})
		</script>
	</body>

</html>